<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>李超强</title>
    <!-- 修改网页小图标 -->
    <link rel="icon" type="image/x-icon" href="../static/img/logo.png">
    <!-- css样式引入 -->
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/font.css">
    <!-- 矢量图引入 -->
    <link rel="stylesheet" href="../static/font/font_97ronkgcfew/iconfont.css">
</head>
<body>
<!-- 根盒子 -->
<div id="root">
    <!-- 头部logo区域 -->
    <header id="header">
        <img src="./img/logo.png" alt="">
        <h1>.Designer</h1>
        <div class="menu iconfont icon-caidan1"></div>
    </header>
    <!-- 主体区域 -->
    <main>
        <!-- 左侧个人信息 -->
        <div class="personal">
            <div>
                <div class="photo">
                    <img class="img1" src="./img/personal/1.png" alt="">
                    <img class="img2" src="./img/personal/2.png" alt="">
                    <img class="img3" src="./img/personal/3.png" alt="">
                </div>
                <p class="name">李超强</p>
                <p class="profession">Android 工程师</p>
                <p class="call">
                    <a href="#" class="iconfont icon-github"></a>
                    <a href="#" class="iconfont icon-weixin"></a>
                </p>
                <div class="download">
                    <a href="#">下载</a>
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap-message">
                <!-- 第一部分 -->
                <div class="part part1" id="part1">
                    <h2>HELLO,I’M ChaoQiang_Li!</h2>
                    <p class="part1-introducer">我是一名来自中国的Android开发者，热衷于研究原生Java、Sqlite、Room、Rxjava、Okhttp。
                        同时我也是一名WEB学习者>.<</p>
                    <div class="part1-introducer-information">
                        <div class="information-message">
                            <h3>个人信息</h3>
                            <ul>
                                <li>
                                    <p class="dt">姓名</p>
                                    <p class="dd">李超强</p>
                                </li>
                                <li>
                                    <p class="dt">生日</p>
                                    <p class="dd">14 06 1992</p>
                                </li>
                                <li>
                                    <p class="dt">地址</p>
                                    <p class="dd">北京昌平区北七家温泉花园</p>
                                </li>
                                <li>
                                    <p class="dt">邮箱</p>
                                    <p class="dd">18600260492@qq.com</p>
                                </li>
                                <li>
                                    <p class="dt">电话</p>
                                    <p class="dd">+86-18600260492</p>
                                </li>
                            </ul>
                        </div>
                        <div class="information-languager">
                            <h3>语言</h3>
                            <ul>
                                <li>
                                    <p class="languages">
                                        <span>中文</span>
                                        <span>母语</span>
                                    </p>
                                    <p class="proficiency">
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span></span>
                                    </p>
                                </li>
                                <li>
                                    <p class="languages">
                                        <span>英语</span>
                                        <span>流利</span>
                                    </p>
                                    <p class="proficiency">
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span class="point"></span>
                                        <span></span>
                                        <span></span>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="part1-introducer-skills">
                        <div class="part1-introducer-skills-left">
                            <h3>专业技能</h3>
                            <ul>
                                <li>
                                    <p class="languages">
                                        <span>HTML5 & CSS</span>
                                        <span>90%</span>
                                    </p>
                                    <p class="proficiency">
                                        <span></span>
                                        <span style="width:90%"></span>
                                    </p>
                                </li>
                                <li>
                                    <p class="languages">
                                        <span>Javascript & NodeJs</span>
                                        <span>80%</span>
                                    </p>
                                    <p class="proficiency">
                                        <span></span>
                                        <span style="width:80%"></span>
                                </li>
                                <li>
                                    <p class="languages">
                                        <span>Vue & React</span>
                                        <span>75%</span>
                                    </p>
                                    <p class="proficiency">
                                        <span></span>
                                        <span style="width:75%"></span>
                                    </p>
                                </li>
                            </ul>
                        </div>
                        <div class="part1-introducer-skills-right">
                            <h3>附加技能</h3>
                            <ul>
                                <li>
                                    <div class="svg">
                                        <svg viewBox="0 0 100 100" style="display: block; width: 100%;">
                                            <path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#c0e3e7" stroke-width="5" fill-opacity="0" style="stroke-dasharray: 298.493, 298.493; stroke-dashoffset: 60;"></path>
                                        </svg>
                                        <span>80%</span>
                                    </div>
                                    <p>Flutter</p>
                                </li>
                                <li>
                                    <div class="svg">
                                        <svg viewBox="0 0 100 100" style="display: block; width: 100%;">
                                            <path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#c0e3e7" stroke-width="5" fill-opacity="0" style="stroke-dasharray: 298.493, 298.493; stroke-dashoffset: 90;"></path>
                                        </svg>
                                        <span>70%</span>
                                    </div>
                                    <p>Electron</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 第三部分 -->
                <div class="part part3" id="part3">
                    <h2>工作经验</h2>
                    <ul>
                        <li>
                            <div class="part3-left"><p>2021 7 - 至今</p></div>
                            <div class="part3-right">
                                <h3>裕福实业投资优先公司</h3>
                                <img src="./img/logo/logo-envato.png" alt="">
                                <p class="name">技术部</p>
                                <p class="content">Android 开发</p>

                            </div>
                        </li>
                        <li>
                            <div class="part3-left"><p>2021 3 - 2021 7</p></div>
                            <div class="part3-right">
                                <h3>趣口才教育科技有限公司</h3>
                                <img src="./img/logo/logo-bootstrap(1).png" alt="">
                                <p class="name">技术部</p>
                                <p class="content">Android  开发</p>
                            </div>
                        </li>
                        <li>
                            <div class="part3-left"><p>2018 10 - 2021 3</p></div>
                            <div class="part3-right">
                                <h3>北京一凤一龙科技有限公司</h3>
                                <img src="./img/logo/logo-evernote.png" alt="">
                                <p class="name">技术部</p>
                                <p class="content">Android 开发</p>
                            </div>
                        </li>
                        <li>
                            <div class="part3-left"><p>2016 8 - 2018 8</p></div>
                            <div class="part3-right">
                                <h3>北京华媒康讯信息技术股份有限公司</h3>
                                <img src="./img/logo/logo-evernote.png" alt="">
                                <p class="name">技术部</p>
                                <p class="content">Android 开发</p>
                            </div>
                        </li>
                    </ul>
                    <div class="bottom">
                        <h2>教育</h2>
                        <ul class="bottom">
                            <li>
                                <div class="part3-left"><p>2015 9 - 2018 3</p></div>
                                <div class="part3-right">
                                    <h3>中国地址大学</h3>
                                    <p class="name">计算机应用与技术</p>

                                </div>
                            </li>
                            <li>
                                <div class="part3-left"><p>2018 3 - 2021 7</p></div>
                                <div class="part3-right right-bottom">
                                    <h3>北京科技大学</h3>
                                    <p class="name">工商管理</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 第四部分 -->
                <div class="part part4" id="part4">
                    <h2>项目经验</h2>
                    <ul>
                        <li>
                            <div class="part4-left">
                                <img src="../static/img/images/1(1).jpg" alt="">
                            </div>
                            <div class="part4-right">
                                <h3>电商</h3>
                                <p class="name">福卡商城</p>
                                <p class="content">福卡购买</p>

                            </div>
                        </li>
                        <li>
                            <div class="part4-left">
                                <img src="../static//img/images/2(1).jpg" alt="">
                            </div>
                            <div class="part4-right">
                                <h3>教育</h3>
                                <p class="name">趣口才</p>
                                <p class="content">6-12岁  口才教育</p>

                            </div>
                        </li>
                        <li>
                            <div class="part4-left">
                                <img src="../static/img/images/3(1).jpg" alt="">
                            </div>
                            <div class="part4-right">
                                <h3>社交</h3>
                                <p class="name">家共享</p>
                                <p class="content">圈子话题</p>
                            </div>
                        </li>
                        <li>
                            <div class="part4-left">
                                <img src="../static/img/images/3(1).jpg" alt="">
                            </div>
                            <div class="part4-right">
                                <h3>新闻资讯</h3>
                                <p class="name">健康界</p>
                                <p class="content">医疗咨询</p>
                            </div>
                        </li>
                    </ul>
                    <h2>客户</h2>
                    <ul class="logo">
                        <li><img src="../static/img/logo/logo-wordpress.png" alt=""></li>
                        <li><img src="../static/img/logo/logo-bootstrap.png" alt=""></li>
                        <li><img src="../static/img/logo/logo-jquery.png" alt=""></li>
                        <li><img src="../static/img/logo/logo-compass.png" alt=""></li>
                        <li><img src="../static/img/logo/logo-teaspoon.png" alt=""></li>
                        <li><img src="../static/img/logo/logo-evernote.png" alt=""></li>
                    </ul>
                </div>
                <!-- 第五部分 -->
                <div class="part part5" id="part5">
                    <h2>博客</h2>
                    <p>对于那些对图形和工业设计的最新趋势感兴趣的人来说，阅读我的博客可能会很有用，也很有趣。我每天都写文章，包括免费赠品和赠品。我很乐意听取您的任何意见，并感谢您的提问和反馈.</p>
                    <div class="btn">
                        <a href="">看看我的博客</a>
                    </div>
                </div>
                <!-- 第六部分 -->
                <div class="part part6" id="part6">
                    <h2>联系我</h2>
                    <div class="part6-wrap">
                        <a href="#" class="iconfont icon-github"></a>
                        <a href="#" class="iconfont icon-weixin"></a>
                        <p class="fell">如果有任何问题，请随时与我联系</p>
                        <p class="name">姓名 (*)</p>
                        <input type="text">
                        <p class="name">邮箱 (*)</p>
                        <input type="text">
                        <p class="name">问题</p>
                        <input type="text">
                        <p class="name">主要内容</p>
                        <textarea name="" id=""></textarea>
                        <input class="send" type="submit" value="发送">
                    </div>

                </div>
                <!-- 最底部信息设置 -->
                <p class="footer">Ola Resume @ All Rights Reserved 2021</p>
            </div>
            <!-- 左侧导航栏 -->
            <nav>
                <div>
                    <a href="javascript:" class="active"><span class="img"></span></a>
                    <a href="javascript:" class="iconfont icon-portfolio"></a>
                    <a href="javascript:" class="iconfont icon-xiangmujingyan"></a>
                    <a href="javascript:" class="iconfont icon-preferences"></a>
                    <a href="javascript:" class="iconfont icon-blog"></a>
                    <a href="javascript:" class="iconfont icon-email"></a>
                </div>
            </nav>
        </div>
    </main>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="./js/demo.js"></script>
</body>
</html>